<script setup lang="ts">
// ref:可以获取真实的Dom节点，可以获取到子组件实例VC
// $parent:可以在子组件内部获取到父组件的实例
import Son from "@/views/refParent/Son.vue"
import Daughter from "@/views/refParent/Daughter.vue";
import { ref } from "vue";
let money = ref(100000);
// 获取子组件实例
let son = ref();
const handler = () => {
  money.value+=10;
  console.log(son);
  son.value.money-=10;
  son.value.run()
}
defineExpose({
  money
})
</script>
<template>
  <div class="box">
    <div class="head">
      <h1>我是父组件money: {{money}}</h1>
      <hr />
      <el-button @click="handler" type="primary" size="large">借钱10元</el-button>
    </div>
    <div class="content">
      <Son ref="son"></Son>
      <Daughter></Daughter>
    </div>
  </div>
</template>
<style scoped>
.box {
  height: 900px;
  background: skyblue;
}
.content {
  display: flex;
  justify-content: space-between;
}
</style>
